<template>
	<view>
		<cu-custom  :isBack="true">
			<block slot="content">{{pageDesign.pageName}}</block>
		</cu-custom>
		
		<view class="createWork-con container">
		  <u-form :model="form" ref="uForm" style="width: 100%;">
			<view class="createWork-con-title">
				<text>套餐</text>
				<text style="color: #FF5858;">*</text>
			</view>
			<view class="createWorkform-con createWorkform-conId">			
				<u-form-item  class="input-con" prop="package" label-width="0">
					<u-input :border="border" type="select" :select-open="packageTypeState" v-model="form.package" placeholder="请选择套餐内容" @click="packageTypeState = true"></u-input>
				</u-form-item>
			</view>
		
			<view class="createWork-con-title">
				<text>设备</text>
				<text style="color: #FF5858;">*</text>
			</view>
			<view class="inputpackge">
				   <view class="inputCon-left">
			        	<u-form-item  class="input-con input-conflex">
						    <u-input v-model="sbdata" class="hbgl-input" :disabled="true" style="color:#7C808E ;"/>
						</u-form-item>
					</view>
					<view class="inputCon-right">
						<image class="imastyle" :src="imgSrc" mode=""></image>
					</view>
			</view>
			<u-swipe-action :show="item.show" :index="index" 
						v-for="(item, index) in list" :key="item.id" 
						@click="click" @open="open"
						:options="options">
					<view class="inputpackge inputpackgelist">
						   <view class="inputCon-left" style="width: 100%;">
								<text>2131321</text>
							</view>
							<view class="inputCon-right" style="right: 10px;">
								<image class="imastyle" :src="imgSrc" mode=""></image>
							</view>
							<!-- <view class="inputpackgeRemove">
								<text>删除</text>
							</view> -->
					</view>
			</u-swipe-action>
			<view class="createWork-con-title">
				<text>身份证</text>
				<text style="color: #FF5858;">*</text>
			</view>
			<view class="applyFor-form-conFlex">
				
				<view class="applyFor-form-conLi">
					<view class="applyFor-form-conLiBg">
						<view class="pre-box" v-if="!upload2.showUploadList">
							<view class="pre-item" v-for="(item, index) in upload2.lists" :key="index">
								<image class="pre-item-image" :src="item.url" mode="aspectFill"></image>
								<view class="u-delete-icon" @tap.stop="deleteItem(index,'uUpload2')">
									<uni-icons type="closeempty" size="15" color="#fff"></uni-icons>
								</view>
							</view>
						</view>
						
						<u-upload :custom-btn="true" ref="uUpload2" :show-upload-list="upload2.showUploadList"  max-count="1" :before-upload="beforeUpload2" :auto-upload="false" :show-tips="false"> 
							<view slot="addBtn" class="slot-btn slot-btn2" hover-class="slot-btn__hover" hover-stay-time="150"></view>
						</u-upload>
						
					</view>
					<view class="textStyle">身份证国徽面</view>
					<uni-view v-if="errorData.idCardError2" class="u-form-item__message">{{errorData.idCardError2}}</uni-view>
				</view>
				
				<view class="applyFor-form-conLi">
					<view class="applyFor-form-conLiBg">
						<view class="pre-box" v-if="!upload1.showUploadList">
							<view class="pre-item" v-for="(item, index) in upload1.lists" :key="index">
								<image class="pre-item-image" :src="item.url" mode="aspectFill"></image>
								<view class="u-delete-icon" @tap.stop="deleteItem(index,'uUpload')">
									<uni-icons type="closeempty" size="15" color="#fff"></uni-icons>
								</view>
							</view>
						</view>
						<u-upload :custom-btn="true"  ref="uUpload" :deletable="true" :show-upload-list="upload1.showUploadList"  max-count="1"  :before-upload="beforeUpload" :auto-upload="false" :show-tips="false"> 
							<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"></view>
						</u-upload>
					</view>
					<view class="textStyle">身份证人面像</view>
					<uni-view v-if="errorData.idCardError" class="u-form-item__message">{{errorData.idCardError}}</uni-view>
				</view>
			</view>
			
			<view class="text-container">
				<view class="text-ul">
					<view class="text-li" v-for="item in information" :key="item.id">
						<text>{{item.title}}</text>
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			
		  </u-form>
		  
		</view>
		<view class="sub-btn" @click="submit">
			  确认
		</view>
		<u-modal v-model="showStatus" :content="content" :show-cancel-button="true" @confirm="shoWconfirm" ></u-modal>
		<u-select mode="single-column" :list="packageList" v-model="packageTypeState" @confirm="serviceListConfirm"></u-select>
	</view>
</template>

<script>
	import debounce from 'lodash/debounce' 
	import config from 'config/env'
	export default {
		data() {
			return {
				pageDesign:{
					pageName : '创建客户'
				},
				packageTypeState:false, //服务类型
				sbdata:'564245456648',
				errorType: ['message'],
				form:{
					package : '',
					formList:[
						{
							id : '564245456648'
						}
					]
				},
				/*****滑动删除******/
				list:[
					{
						id: 1,
						show: false
					},
				],
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#546CFC',
							height:'46px'
						}
					}
				],
				
				/*****滑动删除end******/
				information:[
					{
						id : 0,
						title:'宽带账号：',
						text : '09564866'
					},
					{
						id : 1,
						title:'宽带密码：',
						text : '123456'
					},
					{
						id : 2,
						title:'客户姓名：',
						text : '何卫华'
					},
					{
						id : 3,
						title:'客户电话：',
						text : '15563248975'
					},
					{
						id : 4,
						title:'楼盘：',
						text : '时代倾城2期56栋'
					},
					{
						id : 5,
						title:'地址：',
						text : '望城县银星路时代倾城2期56栋406'
					},
					{
						id : 6,
						title:'大区：',
						text : '望城左岸网格'
					},
					{
						id : 7,
						title:'宽带账号：',
						text : '09564866'
					},
					{
						id : 8,
						title:'添加人：',
						text : '胡文杰'
					}
				],
				errorData:{  //错误提示
					idCardError:'',
					idCardError2:'',
					idCardError3:'',
					qualificationsError:'',
					nameError:''
				},
				showStatus: false,
				confirmIndex: -1, // 初始化为-1，表示没有待删除的项
				uploadRef: '', // 初始化为空字符串
				content: '您确定要删除此项吗?',
				
				labelPosition: 'left',
				border: false,
				imgSrc:`${config.imgSrcL}erwm.png`,
				packageList:[
					{
						value: '套餐一',
						label: '套餐一'
					},
					{
						value: '套餐二',
						label: '套餐二'
					},
					{
						value: '套餐三',
						label: '套餐三'
					}
				],
				upload1: {   //正面身份证
				  action: '', // 上传地址
				  showUploadList: false, 
				  lists: []
				},
				upload2: {   //反面身份证
				  action: '', // 第二个上传地址
				  showUploadList: false, 
				  lists: []
				},
				rules: {  //检验规则
					package: [
						{
							required: true,
							message: '请选择套餐内容',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'change'
						}
					],
				}
			}
		},
		methods:{
			async beforeUpload(index, list) {  //上传前触发的钩子回调函数
				if(list){
					this.errorData.idCardError = ''
				}
			},
			async beforeUpload2(index, list) {
				if(list){
					this.errorData.idCardError2 = ''
				}
			},
			async beforeUpload3(index, list) {
				if(list){
					this.errorData.idCardError3 = ''
				}
			},
			// 套餐
			serviceListConfirm(e){
				this.form.package = '';
				e.map((val, index) => {
					this.form.package += this.form.package == '' ? val.label : '-' + val.label;
				})
			},
			deleteItem(index,uploadRef) {
				this.showStatus = true;   // 打开确认对话框
				this.confirmIndex = index  // 设置待删除的项的索引
				this.uploadRef = uploadRef; // 设置上传组件的引用名称
				// this.$refs.uUpload.remove(index);
			},
			shoWconfirm(){
				 if (this.confirmIndex !== -1 && this.uploadRef !== '') {
					 this.$refs[this.uploadRef].remove(this.confirmIndex); // 删除指定索引的项
					 this.confirmIndex = -1; // 重置待删除的项的索引
					 this.uploadRef = ''; // 重置上传组件的引用名称
				}
			},
			submit : debounce(function(){  //提交表单
				console.log('节流')
				this.$refs.uForm.validate(valid => {
					if(!this.upload1.lists.length){
						this.errorData.idCardError = '请上传身份证人面像'
						valid = false
					}
					if(!this.upload2.lists.length){
						this.errorData.idCardError2 = '请上传身份证国徽像'
						valid = false
					}
					if (valid) {
						// if (this.form.sex === '男') {
						// 	this.form.sex = '1';
						// } else if (this.form.sex === '女') {
						// 	this.form.sex = '2';
						// } else if (this.form.sex === '保密') {
						// 	this.form.sex = '0';
						// }
						console.log(this.form);
						this.show = true
					} else {
						console.log('验证失败');
					}
				});
			},300),
			
			
			/***********滑动删除********/
			click(index) {
					this.list.splice(index, 1);
					// this.$u.toast(`删除了第${index}个cell`);
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if(index != idx) this.list[idx].show = false;
				})
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			this.upload1.lists = this.$refs.uUpload.lists;
			this.upload2.lists = this.$refs.uUpload2.lists;
			// this.upload3.lists = this.$refs.uUpload3.lists;
			
		},
		onLoad(options) {
			console.log(options.data)
		},
		watch:{
			'upload1.lists': function(newVal) {
			  if (newVal.length > 0) {
				this.errorData.idCardError = '';
			  }else{
				this.errorData.idCardError = '请上传身份证人面像' 
			  }
			},
			'upload2.lists': function(newVal) {
			  if (newVal.length > 0) {
				this.errorData.idCardError2 = '';
			  }else{
				this.errorData.idCardError2 = '请上传身份证国徽面'
			  }
			}
		},
		
		
	}
</script>

<style lang="scss">
page{
	background-color: #fff;
}
.createWork-con{
	padding-bottom: 60px;
}
.text-container{
	background: #FFFFFF;
	border: 1px solid #E7E7E7;
	border-radius: 18rpx;
	margin-top: 87.89rpx;
	.text-ul{
		.text-li{
			padding:30rpx 15px;
			color: #7C808E;
			font-size: 26rpx;
			border-bottom: 1px solid #E7E7E7;
		}
	}
}
.sub-btn{
	height: 88rpx;
	background: #546CFC;
	width: 100%;
	line-height: 88rpx;
	text-align: center;
	color: #fff;
	font-size: 34rpx;
	position: fixed;
	bottom: 0;
}

/*******************上传身份证*******************/
.applyFor-form-conLiBg{
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #F7F8FF;
	padding: 22rpx 50rpx;
	border-radius: 12rpx;
}
.applyFor-form-conFlex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.applyFor-form-conLi{
		margin-bottom: 15px;
		text-align: center;
		width: 48%;
		.textStyle{
			margin-top: 10px;
			font-size: 26rpx;
			color: #7C808E;
		}
	}
}

// .slot-btn {
// 	width: 319.69rpx;
// 	height: 231.21rpx;
// 	display: flex;
// 	justify-content: center;
// 	align-items: center;
// 	background: url('#{$global-url-prefix}sfzz.png') no-repeat;
// 	background-size: cover;
// 	border-radius: 10rpx;
// }
.wrap {
	padding: 24rpx;
}

.slot-btn {
	width: 235.55rpx;
	height: 162.89rpx;
	display: flex;
	background: url('#{$global-url-prefix}sfzblue.png') no-repeat;
	background-size: 235.55rpx 162.89rpx;
	border-radius: 10rpx;
}
.slot-btn2{
	background: url('#{$global-url-prefix}sfzfmblue.png') no-repeat;
	background-size: 235.55rpx 162.89rpx;
}
.slot-btn3{
	background: url('#{$global-url-prefix}sfzf.png') no-repeat;
	background-size: cover;
}


.pre-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.pre-item {
	position: relative;
	width: 319.69rpx;
	height: 231.21rpx;
	border-radius: 10rpx;
	overflow: hidden;
	position: relative;
	margin-bottom: 20rpx;
	background-color: #ffffff;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
	border: 1rpx solid #ededed;
}
.u-delete-icon{
	position: absolute;
	right: 10rpx;
	top: 10rpx;
	background-color: #fa3534;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.pre-item-image {
	width: 319.69rpx;
	height: 231.21rpx;
}

.u-form-item__message{
    font-size: 12px;
    line-height: 12px;
    color: #fa3534;
    margin-top: 6px;
}

/*************************/


.inputCon-right{
	display: flex;
	justify-content: center;
	align-items: center;
	.imastyle{
		width: 124.22rpx;
		height: 56.25rpx;
	}
}
.inputpackgelist{
	height: 46px ;
	border-radius: 12rpx ;
	color:#7C808E;
	font-size: 26rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px 0px  5px 10px;
	.inputpackgeRemove{
		width: 114rpx;
		height: 85rpx;
		background: #546CFC;
		border-radius: 12rpx;
		color: #fff;
		line-height: 85rpx;
		text-align: center;
	}
}
.inputpackge{
	position: relative;
	background-color: #F7F8FF;
	margin-bottom: 10px;
	.inputCon-right{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 10px;
	}
	.inputCon-left{
		width: 100%;
		
	}
}
.container{
	width: 95%;
	margin: 0 auto;
}

.input-con{
	width: 100%;
}
.input-conflex{
	display: flex;
	justify-content: space-between;
}
.bgLiner{
	background: #fff;
	color: #000;
	border-bottom: 1px solid #f5f5f5;
	z-index: 999999;
}
.createWork-con-title{
	height: 90rpx;
	line-height: 90rpx;
	font-size: 28rpx;
	color: #000;
}
::v-deep .u-form-item{
	padding: 5px 10px !important;
	background-color: #F7F8FF;
	border-radius:12rpx;
}
.u-form-item.data-v-5e7216f1  {
	padding: 5px 10px !important;
	background-color: #F7F8FF;
	
	font-size: 26rpx !important;
}
.u-input__input.data-v-fdbb9fe6{
	height: 50rpx !important;
	border-radius: 12rpx !important;
	color:#7C808E !important;
	border: none;
	font-size: 26rpx !important;
}
.uni-input-input::placeholder {
  color: red !important;
  font-style: italic !important;
}
</style>
